<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人收藏</title>
  <style>
    .product-container {
      background-color:#f2f2f2;
    }

    .product-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .product-item {
      margin-top: 10px;
      width: 85%;
      margin-bottom: 20px;
      margin-left: 10px;
      text-align: center;
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 20px;
      background-color: white;
    }

    .product-image {
      width: 100%;
      height: auto;
    }

    .product-name {
      font-size: 14px;
      line-height: 20px;
      height: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .product-buttons {
      margin-top: 10px;
    }
    .product-price{
      color: red;
    }
    .block {
      display: flex;
      align-items: center; /* 垂直居中 */
    }
    a{
      list-style: none;
      text-decoration: none;
      color: gray;
    }
  </style>
</head>
<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<body>
<div id="app">
  <el-page-header @back="goBack" content="24°个人收藏">
  </el-page-header>
  <div>
    <el-row>
      <el-col :span="4">
        <el-menu
                default-active="all"
                unique-opened
                :default-openeds="['1']"
        >
        </el-menu>
      </el-col>
      <div class="product-container">
        <el-row class="product-row">
          <el-col :span="6" v-for="product in displayedProducts" :key="product.commodity_id">
            <div class="product-item">
              <img :src="product.commodityPic.split(';')[0]" class="product-image"  @click="showGoodsInfo(product.commodityId)">
              <p class="product-name">{{ product.commodityName }}</p>
              <p class="product-price">￥{{product.price}}</p>
              <p class="product-buttons">
                <el-button type="text" class="button" icon="el-icon-star-off" @click="delCollect(product.commodityId)">取消收藏</el-button>
                <el-button type="text" class="button" icon="el-icon-goods" id="shopping" @click="addShoppingCard(product.commodityId)">加购物车</el-button>
              </p>
            </div>
          </el-col>
        </el-row>
      </div>

    </el-row>
  </div>
</div>


<script>
  const urlParams = new URLSearchParams(window.location.search);
  const unameValue=urlParams.get('userName');
  const id=urlParams.get('userId');
  // 创建一个vue的实例对象,里面写那些数据和方法(一个是页面加载完后自动执行的方法，一个是其他操作后执行的代码)
  // 创建 Vue 实例
  new Vue({
    el: '#app',
    data() {
      return {
        displayedProducts: []
      }
    },
    methods: {
      goBack() {
        console.log('go back');
        history.go(-1); // 返回上一个页面
      },
      showGoodsInfo:function(id){
        let uidValue = null; // 在函数内部定义 uidValue 变量
        console.log(unameValue);
        axios.get('../users?op=UsersInfoByName&userName=' + unameValue)
                .then(Response => {
                  console.log("++++++" + Response.data.data[0].userId);
                  uidValue = Response.data.data[0].userId;
                  console.log(id);
                  window.location.href="goodsInfo.html?id="+id+'&userName='+unameValue+'&userId='+uidValue;
                });

      },
      delCollect:function (id){
        let uidValue = null; // 在函数内部定义 uidValue 变量
        console.log(unameValue);
        axios.get('../users?op=UsersInfoByName&userName=' + unameValue)
                .then(Response => {
                  console.log("++++++" + Response.data.data[0].userId);
                  uidValue = Response.data.data[0].userId;

                  axios.get('../users?op=delCollect&commodityId=' + id + '&userId=' + uidValue)
                          .then(Response => {
                            console.log(Response);
                            if (Response.data > 0) {
                              alert("取消收藏成功！！！");
                              //this.$forceUpdate();
                              location.reload();
                            } else {
                              alert("不可以重复取消！！！");
                            }
                          });
                });
      },
      addShoppingCard: function (id) {
        let uidValue = null; // 在函数内部定义 uidValue 变量
        console.log(unameValue);
        axios.get('../users?op=UsersInfoByName&userName=' + unameValue)
                .then(Response => {
                  console.log("++++++" + Response.data.data[0].userId);
                  uidValue = Response.data.data[0].userId;
                  axios.get('../users?op=ShoppingCard&productId=' + id + '&userId=' + uidValue)
                          .then(Response => {
                            console.log(Response);
                            if (Response.data > 0) {
                              alert("添加购物车成功！！！");
                            } else {
                              alert("添加失败！！！");
                            }
                          });
                });
      },
      fetchActiveTabs(){
        // 使用 axios 发送请求获取商品分类数据
        axios.get('../users?op=CollectGoodsf&userId='+id)
                .then(response => {
                  this.displayedProducts = response.data.data;
                  //console.log(this.displayedProducts+".........>")
                })
      }
    },
    mounted(){
      this.fetchActiveTabs();
    }
  });
</script>
</body>
</html>